<template>
  <el-dialog title="提示" :visible.sync="isVisible" width="35%">
    <el-tree
      ref="tree"
      :data="data"
      show-checkbox
      node-key="id"
      :check-strictly="true"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
      :v-loading="loading"
      @check="check"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="isVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { dataToTree } from '@/utils/tools'
import { getAuthList } from '@/api/auth'
import { assignPrem, getRoleInfo } from '@/api/role'
export default {
  name: 'DistributionAuthTree',
  components: {},
  props: {
  },
  data() {
    return {
      isVisible: false,
      roleId: null, // 角色id

      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      Loading: false

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAuthList()
  },
  mounted() {},
  methods: {
    open(roleId) {
      this.isVisible = true
      this.roleId = roleId
      this.getRoleInfo()
    },
    // 渲染列表
    async getAuthList() {
      this.loading = true
      const { data } = await getAuthList()

      // console.log(data)
      this.data = dataToTree(data.filter(item => item.enVisible === '1'))
      this.loading = false
    },
    async submit() {
      this.loading = true
      this.isVisible = false
      // console.log(this.$refs.tree.getCheckedKeys())
      await assignPrem({
        id: this.roleId,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      // 提示
      this.$message.success('分配成功！')
      this.loading = false
    },
    async getRoleInfo() {
      this.loading = true
      const res = await getRoleInfo(this.roleId)
      // console.log(res)
      this.$refs.tree.setCheckedKeys(res.data.permIds)
      this.loading = false
    },
    check(a) {
      if (a.pid !== 0) {
        this.$refs.tree.setCheckedKeys([...this.$refs.tree.getCheckedKeys(), a.pid])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
